<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>let-const use cases</title>
	<style>
		.completed{
			text-decoration: line-through;
		}

		button{
			padding: 10px 15px;
			font-size: 16px;
			margin: 5px;
		}
	</style>
	<script src="https://jspm.io/system@0.19.34.js"></script>
</head>

<body>
	<ul>
		<li>go to store</li>
		<li>watch tv</li>
		<li>ho shopping</li>
	</ul>
	<button>fire</button>
	<button>dancer</button>
	<button>ice cream</button>
	<button>hamburger</button>
	<button>fish</button>
	<script>
		// use const by default
		// only use let if rebinding is needed
		// var shouldn't be used in ES6

		/* (function () {
			var name = 'jean';
		})();

		{ const name = 'jelly'; }

		for (let i = 0; i < 10; i++) {
			console.log(i)
			setTimeout(() => {
				console.log(`i:${i}`);
			}, 1000);
		} */

		// console.log(color);
		// var color = 'pink';
		// const color = "pink"; // Uncaught ReferenceError: Cannot access 'color' before initialization
		// console.log(color);

	</script>
</body>

</html>